<template>
	<view class="dialog-container" v-if="modelValue">
		<view class="content">
			<view class="title-message">
				<view class="title">{{title}}</view>
				<view class="message">{{message}}</view>
			</view>
			<view class="footer">
				<view class="cancel" @click="cancel">取消</view>
				<view class="sure" @click="sure">确认</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	/**
	const { title = '标题', message = '这个提示的内容啊' } = defineProps<{
		title : string;
		message : string
	}>()
	**/
	defineProps({
		title: {
			type: String,
			default: '标题'
		},
		message: {
			type: String,
			default: '这个提示的内容啊'
		},
		modelValue: {
			type: Boolean,
			default: false
		}
	})

	/* const emits = defineEmits(['update:modelValue','onClose']) */
	const emits = defineEmits<{
		(e : 'update:modelValue', value : boolean),
		(e : 'onClose', value : 'cancel' | 'sure')
	}>()

	const cancel = () => {
		emits('update:modelValue', false)
		emits('onClose', 'cancel')
	}

	const sure = () => {
		emits('update:modelValue', false)
		emits('onClose', 'sure')
	}
</script>

<style lang="scss" scoped>
	.dialog-container {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(74, 74, 75, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.content {
			width: 700rpx;
			height: 400rpx;
			background-color: white;
			border-radius: 20rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;

			.title-message {
				flex: 3;
				display: flex;
				flex-direction: column;

				.title {
					flex: 1;
				}

				.message {
					flex: 2;
				}
			}

			.footer {
				flex: 1;
				display: flex;
				justify-content: space-around;

				.sure {
					color: #c82519;
				}
			}
		}
	}
</style>